<!-- // 图框标题栏 -->
<template>
    <div>

        <el-card>
            <template #header>
                <span class="title-span">API基础信息</span>
            </template>
            <!-- // 两个输入框  一个是名称  一个是描述 -->
            <el-form label-width="100">
                <el-form-item label="节点名称：">
                    <el-input v-model="props.showFlowData.data.label"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="props.showFlowData.data.desc" type="textarea"></el-input>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API状态</span>
            </template>

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIState.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIState.type" disabled></el-input>
                </el-form-item>
            </el-form>

        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输入</span>
            </template>
            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataOne.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataOne.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataOne.selectValue">
                        <el-option v-for="(item, index) in drawing_documents_selectList" :key="index"
                            :label="item.data.label.slice(0, -4)" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataTwo.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataTwo.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataTwo.selectValue">
                        <el-option v-for="(item, index) in drawing_sheet_selectList" :key="index"
                            :label="item.data.label" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />


            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataThree.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataThree.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataThree.selectValue"
                        @change="handleSelectChangeDocument">
                        <el-option v-for="(item, index) in standard_list" :key="index" :label="item.standardName"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataFour.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataFour.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataFour.selectValue">
                        <el-option v-for="(item, index) in sheet_size_list" :key="index" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataSix.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataSix.type" disabled></el-input>
                </el-form-item>
                <el-form-item label="值：">
                    <el-select v-model="popShowData.APIInput.dataSix.selectValue" @change="handleChoiceAttribute">
                        <el-option v-for="(item, index) in attribute_selectList" :key="index" :label="item.data.label"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-divider />

            <el-form label-width="100">
                <el-form-item label="名称：">
                    <el-input v-model="popShowData.APIInput.dataFive.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-input v-model="popShowData.APIInput.dataFive.type" disabled></el-input>
                </el-form-item>
            </el-form>

            <div style="display: flex; justify-content: space-around;">
                <el-text style="font-weight: bold; width: 100px; text-align: right;">值：</el-text>
                <el-button type="primary" @click="handleAddAttribute" style="width: 90%;"> 添加 </el-button>
            </div>
            <div style="margin-top: 10px; display: flex;"
                v-for="(item, index) in popShowData.APIInput.dataFive.dataList" :key="index">
                <el-select v-model="item.operationType" style="width: 20%;">
                    <!-- // 两个下拉值  一个获取 一个手填 -->
                    <el-option value="获取" label="获取"></el-option>
                    <el-option value="手填" label="手填"></el-option>

                    <el-option value="proportion" label="比例"></el-option>
                    <el-option value="totalPages" label="第几页"></el-option>
                    <el-option value="Page" label="共几页"></el-option>
                </el-select>
                <el-select v-model="item.attributeSelectValue" style="width: 20%;"
                    :disabled="item.operationType !== '获取'">
                    <el-option v-for="(item, index) in choice_attribute_select_list" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <el-input v-model="item.attributeInputValue" style="width: 15%;"
                    :disabled="item.operationType !== '手填'"></el-input>
                <el-input v-model="item.coordinateValue" style="width: 15%;"></el-input>
                <el-select v-model="item.operationSelectValue" style="width: 22%;">
                    <!-- // 三个下拉值 按文本名称 ， 按文本内容 ， 按坐标 -->
                    <el-option value="1" label="按文本名称"></el-option>
                    <el-option value="2" label="按坐标"></el-option>
                    <el-option value="3" label="按文本内容"></el-option>
                </el-select>
                <el-button type="danger" @click="handleDeleteAttribute(item, index)" icon="delete" plain></el-button>
            </div>
            <el-divider />

        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
                <span class="title-span">API输出</span>
            </template>

            <div v-for="(item, index) in APIOutput" :key="index">
                <el-form label-width="100">
                    <el-form-item label="名称：">
                        <el-input v-model="item.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-input v-model="item.type" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, watch } from 'vue';
import flowNodesStore from '@/store/modules/flowNodes'
import { computed } from 'vue';
const { proxy } = getCurrentInstance();
const flowNodes = flowNodesStore()
const standard_list = ref(flowNodes.getStandardList())
const sheet_size_list = ref([])
const props = defineProps({
    // Define props here
    showFlowData: {
        type: Object,
    },
    drawer: {
        type: Boolean,
    },
    recapture: {
        type: Boolean
    },
    inputSelectNodeIds: {
        type: Array
    }
});


const popShowData = ref({
    APIBaseData: {
        name: '图框标题栏',
        desc: '通过数据，获取数据的固有属性',
    },
    APIState: {
        name: '成功',
        type: '布尔'
    },
    APIInput: {
        dataOne: {
            name: '图纸文件',
            type: '2D文档',
            selectValue: '',
        },
        dataTwo: {
            name: '图纸图页',
            type: '图页',
            selectValue: '',
        },
        dataThree: {
            name: '组件文件',
            type: '枚举',
            selectValue: '',
        },
        dataFour: {
            name: '组件名称',
            type: '枚举',
            selectValue: '',
        },
        dataFive: {
            name: '标题栏信息',
            type: '多文本',
            dataList: []
        },
        dataSix: {
            name: '单个属性选择',
            type: '枚举',
            selectValue: '',
        },
    },
    APIOutput: []
})

const drawing_documents_selectList = computed(() =>
    flowNodes.getFlowNodes()
        .filter(node => props.inputSelectNodeIds.includes(node.id) && node.data?.methodName === 'createDrawing')
        .map(node => {
            const newNode = JSON.parse(JSON.stringify(node));
            const label = newNode.data?.label;
            if (typeof label === 'string') {
                newNode.data.label = `${label}-图纸页`;
            }
            return newNode;
        })
);

const originalDrawingSheetSelectList = computed(() =>
    flowNodes.getFlowNodes()
        .filter(node =>
            props.inputSelectNodeIds.includes(node.id) &&
            node.data?.methodName === 'createSheet'
        )
        .map(node => {
            const { data } = node;
            const newLabel = data.label;
            return {
                ...node,
                data: {
                    ...data,
                    label: newLabel
                }
            };
        })
);

const drawing_sheet_selectList = computed(() => [
    ...drawing_documents_selectList.value,
    ...originalDrawingSheetSelectList.value
]);

let contrastList = [
    { label: '零件编号', value: 'PartNumber' },
    { label: '版本', value: 'Revision' },
    { label: '定义', value: 'Definition' },
    { label: '术语', value: 'Nomenclature' },
    { label: '来源', value: 'Source' },
    { label: '描述', value: 'Description' },
    { label: '数量', value: 'Count' },
    { label: '层级', value: 'Level' },
    { label: '质量', value: 'Mass' },
]

const attribute_selectList = computed(() => {
    let nodeList = flowNodes.getFlowNodes();
    return nodeList.filter(node => node.data.methodName == 'getProperty');

})

const choice_attribute_select_list = computed(() => {

    if (!popShowData.value.APIInput.dataSix) {
        return [];
    }
    let find_id = popShowData.value.APIInput.dataSix.selectValue;

    let resultList = [];

    const find_node = attribute_selectList.value.find(node => node.id == find_id);

    if (find_node) {
        if (find_node.data.popShowData) {
            find_node.data.popShowData.APIOutput.forEach(element => {
                let obj = {
                    id: find_node.id,
                    label: element.name,
                    value: element.name
                }
                const matchedItem = contrastList.find(item => item.value == element.name);
                if (matchedItem) {
                    obj.label = matchedItem.label;
                }
                resultList.push(obj)
            })
        }
    }

    // let nodeList = flowNodes.getFlowNodes();
    // const getPropertyList = nodeList.filter(node => node.data.methodName == 'getProperty')

    // if (getPropertyList.length > 0) {
    //     if (getPropertyList[0].data.popShowData) {
    //         getPropertyList[0].data.popShowData.APIOutput.forEach(element => {
    //             let obj = {
    //                 id: getPropertyList[0].id,
    //                 label: element.name,
    //                 value: element.name
    //             }
    //             const matchedItem = contrastList.find(item => item.value == element.name);
    //             if (matchedItem) {
    //                 obj.label = matchedItem.label;
    //             }
    //             resultList.push(obj)
    //         })
    //     }
    // }
    return resultList;
})

const node_data = computed(() => {

    let returnObj = {
        //固定值
        positionFlag: props.showFlowData.data.positionFlag,
        methodName: props.showFlowData.data.methodName,

        // 自定义属性
        input2DData: popShowData.value.APIInput.dataOne.selectValue,
        sheetName: popShowData.value.APIInput.dataTwo.selectValue,
        standartName: popShowData.value.APIInput.dataThree.selectValue,

        componetName: popShowData.value.APIInput.dataFour.selectValue,
        componetFile: '',
        titles: []
    }

    popShowData.value.APIInput.dataFive.dataList.forEach((item) => {
        let obj = {
            valueFrom: '',
            findValue: item.coordinateValue,
            findType: item.operationSelectValue,
            source: '',
        }
        if (item.operationType === '获取') {
            // obj.valueFrom = item.attributeSelectValue;
            const matchedItem = contrastList.find(aa => aa.label == item.attributeSelectValue);

            if (matchedItem) {
                obj.valueFrom = matchedItem.value;
            } else {
                obj.valueFrom = item.attributeSelectValue;
            }
            let attribute_obj = choice_attribute_select_list.value.find(element => element.value == item.attributeSelectValue)
            if (attribute_obj) {
                obj.source = attribute_obj.id;
            }
        } else if (item.operationType === '手填') {
            obj.valueFrom = item.attributeInputValue;
        } else {
            obj.valueFrom = item.operationType;
        }
        returnObj.titles.push(obj);
    });

    if (popShowData.value.APIInput.dataThree.selectValue) {
        let find_obj = standard_list.value.find(item => item.id == popShowData.value.APIInput.dataThree.selectValue)
        if (find_obj) {
            returnObj.componetFile = find_obj.componetFile;
        }
    }
    return returnObj;
});

// 暂时没写
const APIOutput = computed(() => {
    const allCheckLists = [{
        name: '图框标题栏',
        type: '组件'
    }];

    // popShowData.value.APIInput.dataFive.checkList.forEach((item) => {
    //     let obj = {
    //         name: item,
    //         type: '视图'
    //     }
    //     allCheckLists.push(obj);
    // });
    return allCheckLists;
});

// watch(() => props.drawer, (val) => {
// if (!val) {
//         setData();// 更新数据
//     }
// }, { deep: true }, { immediate: true })

watch(() => popShowData.value, (val) => {
    if (val) {
        setData();// 更新数据
    }
}, { deep: true }, { immediate: true })


watch(() => props.recapture, (val) => {
    reset();
    getList();
}, { deep: true }, { immediate: true })


watch(() => APIOutput.value, (val) => {
    popShowData.value.APIOutput = val
})

onMounted(() => {
    getList();
    setData();
})
const getList = () => {
    if (props.showFlowData.id) {
        if (flowNodes.getFlowNodesById(props.showFlowData.id)) {
            let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
            if (nodeData.data.popShowData) {
                popShowData.value = JSON.parse(JSON.stringify(nodeData.data.popShowData))
            }

            if (popShowData.value.APIInput.dataTwo.selectValue) {
                handleSelectChangeDocument(popShowData.value.APIInput.dataThree.selectValue, 0)
            }
        }
    }
}
const setData = () => {
    let nodeData = flowNodes.getFlowNodesById(props.showFlowData.id);
    // 如果找到了该节点，则更新数据
    if (nodeData) {
        nodeData.data.popShowData = popShowData.value
        nodeData.data.data = node_data.value
        flowNodes.setFlowNodesById(props.showFlowData.id, nodeData)
    }
}
const reset = () => {
    popShowData.value = {
        APIBaseData: {
            name: '图框标题栏',
            desc: '通过数据，获取数据的固有属性',
        },
        APIState: {
            name: '成功',
            type: '布尔'
        },
        APIInput: {
            dataOne: {
                name: '图纸文件',
                type: '2D文档',
                selectValue: '',
            },
            dataTwo: {
                name: '图纸图页',
                type: '图页',
                selectValue: '',
            },
            dataThree: {
                name: '组件文件',
                type: '枚举',
                selectValue: '',
            },
            dataFour: {
                name: '组件名称',
                type: '枚举',
                selectValue: '',
            },
            dataFive: {
                name: '标题栏信息',
                type: '多文本',
                dataList: []
            },
            dataSix: {
                name: '单个属性选择',
                type: '枚举',
                selectValue: '',
            },
        },
        APIOutput: []
    }
}


const handleAddAttribute = () => {
    popShowData.value.APIInput.dataFive.dataList.push({
        operationType: '',
        attributeSelectValue: '',
        attributeInputValue: '',
        coordinateValue: '',
        operationSelectValue: '',
    })
}

const handleDeleteAttribute = (item, index) => {
    popShowData.value.APIInput.dataFive.dataList.splice(index, 1)
}


const handleSelectChangeDocument = (val, type = 1) => {
    sheet_size_list.value = [];
    if (type == 1) {
        popShowData.value.APIInput.dataFour.selectValue = '';
    }

    let find_obj = standard_list.value.find(item => item.id == val);
    if (find_obj) {
        // find_obj.sheetSize.split(',').forEach(item => {
        //     let selection_obj = {
        //         label: item,
        //     }
        //     sheet_size_list.value.push(selection_obj);
        // });
        find_obj.componetName.split(',').forEach((item, index) => {
            let selection_obj = {
                label: item,
                value: item,
            }
            sheet_size_list.value.push(selection_obj);
            // sheet_size_list.value[index].value = item;
        });
    }
}

const handleChoiceAttribute = (val) => {

}
</script>

<style scoped>
.checkbox-item-sty {
    display: block;
}

::v-deep .el-checkbox__label {
    font-size: 16px;
    /* 你可以根据需要调整字体大小 */
}
</style>